<template>
	<view class="address-container">
		<!-- 收货地址 -->
		<view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
			<text @click="btnChooseAddress"> 请选择收货人地址</text> 
			<view class="text-icon">
				<u-icon name="arrow-right" color="#5e5858"></u-icon>
			</view>
		</view>
		
		<!-- 渲染收货信息的盒子 -->
		<view class="address-box" v-else @click="btnChooseAddress">
			<view class="box-row1">
				<view class="box-row2">
					<view class="address-name">
						收货人: <text class="t">{{address.userName}}</text>
					</view>
					<view class="address-phone">
						电话: <text class="t">{{address.telNumber}}</text>
					</view>
				</view>
				
				<view class="adddress-adr">
					<text>收货地址:</text>
					<text class="t">{{addstr}}</text>
				</view>
			</view>
			
			<view class="address-icon">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	export default {
		name:"my-address",
		data() {
			return {
				// address: {},
			};
		},
		methods:{
			...mapMutations('m_user', ['updateAddress']),
			async btnChooseAddress(){
				// uni-app chooseAddress 接口不接受H5
				const [err, succ] = await uni.chooseAddress().catch(err => err)
				
				if(err === null && succ.errMsg === 'chooseAddress:ok'){
					this.updateAddress(succ)
				}
				
				if(err && err.errMsg === 'chooseAddress:fail cancel' || err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg === 'chooseAddress:fail authorize no response'){
					this.reAuth()
				}
				
			},
			//用户重新授权
			
			async reAuth(){
				const [err2, confirmRusult] = await uni.showModal({
					content:'检测到您没打开地址权限，是否设置打开',
					confirmText: '确认',
					cancelText: '取消'
				}) 
				
				if(err2) return
				
				console.log(confirmRusult);
				if(confirmRusult.cancel === true && confirmRusult.confirm === false) {
					this.$u.toast('取消地址授权')
				}else {
					return uni.openSetting({
						success: (res) => {
							console.log(res.authSetting);
							if(res.authSetting['scope.userInfo'] === false){
								return this.$u.toast('检测不到您的信息呢')
							}
							if(res.authSetting['scope.userInfo']) {
								return this.$u.toast('授权成功！请选择地址')
							}
						}
					})
				}

			}
		},
		computed:{
			
			// 使用storage 中的address渲染到本地
			...mapState('m_user', ['address']),
			...mapGetters('m_user', ['addstr']),
		}
	}
</script>

<style lang="scss">
	.address-container {
		border-bottom: 1px solid #efefef;
		color: #5e5858;
		.address-choose-box {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50px;
		}
		.address-box {
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25rpx;
			font-size: 14px;
			.box-row1 {
				width: 100%;
				display: flex;
				flex-direction: column;
				padding-right: 20rpx;
				//flex前提是父类有宽度
				.box-row2 {
					display: flex;
					// border: 1px solid red;
					justify-content: space-between;
				}
				.adddress-adr {
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					// border: 1px solid 1px;
					text:nth-child(1) {
						flex: 1;
					}
					text:nth-child(2) {
						// border: 1px solid blue;
						flex: 4;
					}
				}
				
			}
			.t {
				margin-left: 15rpx;
			}
		}
	}
</style>
